<!--<template>-->

<!--  <el-card>-->
<!--    <el-row>-->
<!--      <el-col :span="8">-->
<!--        <el-statistic title="订单总数" :value="orderCount" />-->
<!--      </el-col>-->
<!--      <el-col :span="8">-->
<!--        <el-statistic :value="goodsStatusCount">-->
<!--          <template #title>-->
<!--            <div style="display: inline-flex; align-items: center">-->
<!--              商品上架数-->
<!--              <el-icon style="margin-left: 4px" :size="12">-->
<!--                <Male />-->
<!--              </el-icon>-->
<!--            </div>-->
<!--          </template>-->
<!--          <template #suffix>/{{goodsCount}}</template>-->

<!--        </el-statistic>-->
<!--      </el-col>-->
<!--      <el-col :span="8">-->
<!--        <el-statistic title="用户数量" :value="userCount" />-->
<!--      </el-col>-->
<!--    </el-row>-->

<!--  </el-card>-->
<!--  <div class="card-container">-->
<!--    <el-card class="card">-->
<!--      <div id="chart01" class="chart-container"></div>-->
<!--    </el-card>-->

<!--    <el-card class="card">-->
<!--      <div id="main" class="chart-container"></div>-->
<!--    </el-card>-->

<!--  </div>-->

<!--</template>-->

<!--<script  setup>-->
<!--import {onMounted, ref} from 'vue'-->
<!--import { useTransition } from '@vueuse/core'-->
<!--import { ChatLineRound, Male } from '@element-plus/icons-vue'-->
<!--import orderApi from "@/api/orderApi.js"-->
<!--import userApi from "@/api/userApi.js"-->
<!--import goodsApi from "@/api/goodsApi.js"-->
<!--import * as echarts from "echarts";-->


<!--const source = ref(0)-->
<!--const outputValue = useTransition(source, {-->
<!--  duration: 1500,-->
<!--})-->
<!--source.value = 172000-->

<!--const orderCount = ref();-->
<!--const userCount = ref();-->
<!--const goodsCount = ref();-->
<!--const goodsStatusCount = ref();-->



<!--function selectCount(){-->
<!--  orderApi.selectCount()-->
<!--      .then(resp =>{-->
<!--        orderCount.value =  resp.data;-->
<!--      });-->
<!--  userApi.selectCount()-->
<!--      .then(resp =>{-->
<!--        userCount.value =  resp.data;-->
<!--      });-->
<!--  goodsApi.selectCount()-->
<!--      .then(resp =>{-->
<!--        goodsCount.value =  resp.data.count;-->
<!--        goodsStatusCount.value =  resp.data.statusCount;-->

<!--      });-->
<!--}-->
<!--selectCount();-->


<!--function selectEarcharts() {-->
<!--  orderApi.selectEarcharts()-->
<!--      .then(resp => {-->
<!--        let data = new Array();-->
<!--        let count = new Array();-->

<!--        for (let index = 0; index < resp.data.length; index++) {-->
<!--          count.push(resp.data[index].goods.name);-->
<!--          data.push(resp.data[index].count);-->
<!--        }-->
<!--        console.log(count)-->

<!--        let chart01 = echarts.init(document.getElementById('chart01'));-->

<!--        let options = {-->
<!--          title: {-->
<!--            text: '商品销售排行',-->

<!--            left: 'center'-->
<!--          },-->
<!--          tooltip: { // 添加此部分-->
<!--            trigger: 'axis', // 设置为 'axis' 表示在同一轴上共享提示框-->
<!--            axisPointer: { // 使用 axis 指针-->
<!--              type: 'shadow' // 默认为 'line'，这里设置为阴影样式-->
<!--            }-->
<!--          },-->
<!--          xAxis: {-->
<!--            type: 'category',-->
<!--            data: count-->
<!--          },-->
<!--          yAxis: {-->
<!--            type: 'value'-->
<!--          },-->
<!--          series: [-->
<!--            {-->
<!--              data: data,-->
<!--              type: 'bar',-->
<!--              showBackground: true,-->
<!--              backgroundStyle: {-->
<!--                color: 'rgba(180, 180, 180, 0.2)'-->
<!--              }-->
<!--            }-->
<!--          ]-->
<!--        };-->
<!--        // 渲染图表-->
<!--        chart01.setOption(options);-->
<!--      });-->
<!--}-->

<!--//初始化函数-->

<!--onMounted(() => {-->
<!--  selectEarcharts();-->

<!--})-->





<!--function selectChartByStatus() {-->
<!--  userApi.selectChartByStatus()-->
<!--      .then(resp => {-->
<!--        let data = new Array();-->
<!--        let count = new Array();-->
<!--        let userStatus ;-->
<!--        userStatus = resp.data;-->


<!--        var chartDom = document.getElementById('main');-->
<!--        var myChart = echarts.init(chartDom);-->


<!--        var option = {-->

<!--          tooltip: {-->
<!--            trigger: 'item'-->
<!--          },-->
<!--          legend: {-->
<!--            top: '5%',-->
<!--            left: 'center'-->
<!--          },-->
<!--          series: [-->
<!--            {-->
<!--              name: 'Access From',-->
<!--              type: 'pie',-->
<!--              radius: ['40%', '70%'],-->
<!--              avoidLabelOverlap: false,-->
<!--              padAngle: 5,-->
<!--              itemStyle: {-->
<!--                borderRadius: 10-->
<!--              },-->
<!--              label: {-->
<!--                show: false,-->
<!--                position: 'center'-->
<!--              },-->
<!--              emphasis: {-->
<!--                label: {-->
<!--                  show: true,-->
<!--                  fontSize: 40,-->
<!--                  fontWeight: 'bold'-->
<!--                }-->
<!--              },-->
<!--              labelLine: {-->
<!--                show: false-->
<!--              },-->
<!--              data: [-->
<!--                { value: userStatus.未认证, name: '未认证' },-->
<!--                { value: userStatus.已认证, name: '已认证' },-->
<!--                { value: userStatus.禁用, name: '禁用' },-->
<!--                { value: userStatus.注销, name: '注销' },-->
<!--              ]-->
<!--            }-->
<!--          ]-->
<!--        };-->
<!--        myChart.setOption(option);-->
<!--      });-->
<!--}-->
<!--selectChartByStatus();-->

<!--</script>-->

<!--<style scoped>-->
<!--.el-col {-->
<!--  text-align: center;-->
<!--}-->

<!--.card-container {-->
<!--  display: flex; /* 使用flex布局 */-->
<!--  justify-content: space-between; /* 卡片之间留有空间 */-->
<!--  align-items: stretch; /* 拉伸项目以填充容器 */-->
<!--}-->
<!--.card {-->
<!--  background-color: #f5f5f5; /* 卡片背景颜色 */-->
<!--  border-radius: 8px; /* 圆角 */-->
<!--  padding: 20px; /* 内边距 */-->
<!--  margin: 20px;-->
<!--  width: 48%; /* 宽度设置为容器宽度的48%，以便两边有间距 */-->
<!--  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 阴影效果 */-->
<!--  height: 400px;-->
<!--}-->

<!--.chart-container {-->
<!--  height: 400px;-->
<!--  /* 或者您想要的高度 */-->
<!--  width: 100%;-->
<!--  /* 如果您想要图表宽度填满其父容器 */-->
<!--  /* 如果您需要特定的宽度，也可以设置像素值，例如 width: 250px; */-->
<!--}-->

<!--/* 如果需要，可以为不同的图表设置不同的样式 */-->
<!--</style>-->